<template>
  <a-modal :visible="visible" @ok="handleOk" @cancel="handleCancel" :width="800" :unmount-on-close="true">
    <template #title> {{ title }} </template>
    <div class="search">
      客户名称
      <a-input-search search-button @press-enter="tableRef.loadData()" style="width: 200px; margin: 0 20px" v-model="keyWord"></a-input-search>
      <a-space>
        <a-button @click="tableRef.loadData()" type="primary">
          <template #icon>
            <icon-search />
          </template>
          <template #default>搜索</template>
        </a-button>
        <a-button @click="() => { keyWord = ''; tableRef.loadData(); }">
          <template #icon>
            <icon-loop />
          </template>
          <template #default>重置</template>
        </a-button>
      </a-space>
    </div>
    <TableTurn :table-data="getData" ref="tableRef" :args="{rowSelection: { type: 'checkbox',width: 20,},bordered: { headerCell: true },}">
      <a-table-column :width="80" align="center">
        <template #title> 序号 </template>
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>
      <a-table-column :width="150" align="center" title="销售订单编号" data-index="id">
      </a-table-column>
      <a-table-column :width="150" align="center" title="销售订单编号" data-index="number">
      </a-table-column>
      <a-table-column :width="150" align="center" title="客户名称" data-index="clientCompanyName">
      </a-table-column>
    </TableTurn>
  </a-modal>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { GetClientOrder } from '@/api/order-management/client-order';
import { cloneDeep } from 'lodash';

const props = withDefaults(
  // 参数说明
  defineProps<{
    visible?: boolean; //窗口弹窗
    title: string; //标题
    orderList: any; //被勾选的关联订单号id
    ages?: any;
  }>(),
  {
    visible: false,
  }
);
const emit = defineEmits(['changeMarketVisible', 'updateMarketData']);
//客户名称输入框
const keyWord = ref('');
let tableRef = ref();

const handleOk = () => {
  emit('updateMarketData', cloneDeep(tableRef.value.selectedList));
  emit('changeMarketVisible', false);
};
const handleCancel = () => {
  emit('changeMarketVisible', false);
};
const getData = async (page: { page: number; size: number }) => {
  try {
    const res = await GetClientOrder({
      ...page,
      state: 2,
      clientCompanyName: keyWord.value,
    });
    // 把已经勾选的销售订单打印出来
    // const listData = props.orderList ?? [];
    // if (listData.length === 0) {
    //   console.log('未勾选');
    //   // tableRef.value.selectedKeys = [];
    // } else {
    //   console.log('勾选');
    //   tableRef.value.selectedKeys = listData;
    // }
    return Promise.resolve(res);
  } catch (error) {
    console.log(error);
  }
};
</script>

<style lang="less" scoped>
.search {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}
</style>
